<!-- src/views/Login/AuthContainer.vue -->
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import LoginForm from './LoginForm.vue';
import RegisterForm from './RegisterForm.vue';

const router = useRouter();
const isLogin = ref(true);

// 登录表单数据
const loginData = ref({
  username: '',
  password: '',
  remember: false
});

// 注册表单数据
const registerData = ref({
  username: '',
  password: '',
  confirmPassword: '',
  terms: false
});

// 共享状态
const showLoginPassword = ref(false);
const showRegisterPassword = ref(false);
const message = ref(null);

// 登录提交处理
const submitLogin = async () => {
  if (!loginData.value.username || !loginData.value.password) {
    message.value = {
      text: '请输入用户名和密码',
      type: 'error',
      icon: 'fas fa-exclamation-circle'
    };
    return;
  }

  try {
    const response = await axios.post('api/login', loginData.value);
    localStorage.setItem('token', response.data.access_token);

    // 登录成功
    message.value = {
      text: '登录成功！正在跳转...',
      type: 'success',
      icon: 'fas fa-check-circle'
    };

    setTimeout(async () => {
      await router.push('/chat');
    }, 300);
  } catch (error) {
    message.value = {
      text: '登录失败！请检查账号密码或网络连接',
      type: 'error',
      icon: 'fas fa-exclamation-circle'
    };
  }
};

// 注册提交处理
const submitRegister = async () => {
  if (!registerData.value.username ||
      !registerData.value.password ||
      !registerData.value.confirmPassword) {
    message.value = {
      text: '请填写所有必填字段',
      type: 'error',
      icon: 'fas fa-exclamation-circle'
    };
    return;
  }

  if (registerData.value.password !== registerData.value.confirmPassword) {
    message.value = {
      text: '两次输入的密码不一致',
      type: 'error',
      icon: 'fas fa-exclamation-circle'
    };
    return;
  }

  if (!registerData.value.terms) {
    message.value = {
      text: '请同意服务条款和隐私政策',
      type: 'error',
      icon: 'fas fa-exclamation-circle'
    };
    return;
  }

  try {
    await axios.post('api/register', {
      username: registerData.value.username,
      password: registerData.value.password
    })

    // 注册成功
    message.value = {
      text: '注册成功！欢迎加入',
      type: 'success',
      icon: 'fas fa-check-circle'
    };
    await router.push('/login')
  } catch (error) {
    if (error.response && error.response.status === 400) {
      message.value = {
        text: '用户名已存在',
        type: 'error',
        icon: 'fas fa-exclamation-circle'
      };
    } else {
      message.value = {
        text: '注册失败，请重试',
        type: 'error',
        icon: 'fas fa-exclamation-circle'
      };
    }
  }

  // 注册成功后自动切换到登录界面
  setTimeout(() => {
    isLogin.value = true;
    // 清空注册表单
    registerData.value = {
      username: '',
      password: '',
      confirmPassword: '',
      terms: false
    };

    // 清空消息
    setTimeout(() => message.value = null, 1000);
  }, 1000);
};

// 切换密码可见性
const toggleLoginPassword = () => {
  showLoginPassword.value = !showLoginPassword.value;
};

const toggleRegisterPassword = () => {
  showRegisterPassword.value = !showRegisterPassword.value;
};

// 切换表单类型
const switchToRegister = () => {
  isLogin.value = false;
  message.value = null; // 切换时清空消息
};

const switchToLogin = () => {
  isLogin.value = true;
  message.value = null; // 切换时清空消息
};
</script>

<template>
  <div class="auth-bg">
    <header class="app-header">
      <div class="logo">
        <div class="logo-icon">
          <i class="fas fa-comments"></i>
        </div>
        <h1 class="logo-text">ChatWave</h1>
      </div>
      <p class="app-description">安全、便捷的即时通讯平台，连接你与重要的人</p>
    </header>

    <div class="auth-container">
      <div class="auth-banner">
        <div class="banner-content">
          <h2 class="banner-title">加入我们的社区</h2>
          <p class="banner-text">与朋友、家人和同事保持联系，享受无缝沟通体验</p>
        </div>
      </div>

      <div class="auth-form-container">
        <transition name="fade" mode="out-in">
          <LoginForm
              v-if="isLogin"
              :loginData="loginData"
              :showPassword="showLoginPassword"
              :message="message"
              @submit="submitLogin"
              @toggle-password="toggleLoginPassword"
              @switch-to-register="switchToRegister"
          />
          <RegisterForm
              v-else
              :registerData="registerData"
              :showPassword="showRegisterPassword"
              :message="message"
              @submit="submitRegister"
              @toggle-password="toggleRegisterPassword"
              @switch-to-login="switchToLogin"
          />
        </transition>
      </div>
    </div>

    <footer class="app-footer">
      <p>© 2025 ChatWave. 保留所有权利。 · 隐私政策 · 服务条款</p>
    </footer>
  </div>
</template>

<style scoped>
@import '@/assets/auth.css';
</style>
